<style>
  .toolBar {
    margin-bottom: 10px;
  }

  .ivu-dropdown {
    margin: 0px;
  }

  .tCheck {
    padding-left: 10px;
    float: left;
    clear: left;
    z-index: 9999;
  }
</style>
<template>
  <Row v-loading="spinShow">
    <Row class="toolBar" justify="space-between">
      <Col span="8">
      <Button-group>
        <Tooltip v-if="add" content="添加" placement="bottom-start">
          <Button type="ghost" @click="addClick()">
            <Icon type="plus"></Icon>
          </Button>
        </Tooltip>
        <Tooltip v-if="delCheck" content="删除所选" placement="bottom-start">
          <Button type="ghost" @click="delCheckClick()">
            <Icon type="trash-a"></Icon>
          </Button>
        </Tooltip>
        <Tooltip v-if="assign" content="分配资源" placement="bottom-start">
          <Button type="ghost" @click="assignClick()">
            <Icon type="person-add"></Icon>
          </Button>
        </Tooltip>
        <Tooltip v-if="reset" content="重置密码" placement="bottom-start">
          <Button type="ghost" @click="resetClick()">
            <Icon type="refresh"></Icon>
          </Button>
        </Tooltip>
      </Button-group>
      </Col>
      <Col span="16">
      <Button-group style="float: right;">
        <Tooltip content="刷新" placement="bottom-start">
          <Button type="ghost" @click="refresh">
            <Icon type="loop"></Icon>
          </Button>
        </Tooltip>
        <Tooltip content="导出全部数据" placement="bottom-start">
          <Button type="ghost" @click="exportData(1)">
            <Icon type="arrow-down-a"></Icon>
          </Button>
        </Tooltip>
        <Tooltip content="导出当前页数据" placement="bottom-start">
          <Button type="ghost" @click="exportData(2)">
            <Icon type="ios-download-outline"></Icon>
          </Button>
        </Tooltip>
      </Button-group>
      <Input v-model="searchKey" icon="ios-search-strong" placeholder="请输入..."
             style="width:200px;float:right;">
      </Input>
      </Col>
    </Row>
    <Table :context="self"
           border stripe
           :columns="columns"
           :data="curTableData"
           ref="table"
           @on-selection-change="selectRow"

           @on-row-dblclick="show">
    </Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="total" :current="current"
              :pageSize="pageSize"
              :page-size-opts="pageSizeOpts"
              @on-change="changePage"
              @on-page-size-change="changeSize"
              show-elevator
              show-total
              show-sizer></Page>
      </div>
    </div>
    <Modal
      v-show="dataShow"
      title="查看数据详细信息"
      v-model="showData"
      class="editm">
      <Form ref="showForm" :model="showItem" :label-width="80">
        <Form-item v-for="(val, key)  in showItem" :label="key" :key="key">
          <Input :value="val" disabled :icon="key==='Logo'? val:''"></Input>
        </Form-item>
      </Form>
    </Modal>

  </Row>
</template>
<script>
  import api from '../../api'
  import{inputString} from '../../libs/util'
  export default {
    data () {
      return {
        self: this,
        current: 1,
        pageSize: 10,
        total: this.totals,
        searchKey: '',
        spinShow: false,
        showData: false,
        showItem: {},
        pageSizeOpts: [10, 20, 50, 100],
        selectRows: [],//选择的数据
      }
    },
    props: {
      dataAll: {
        type: Array,
        default () {
          return [];
        }
      },
      totals: {
        type: Number
      },
      columns: {
        type: Array,
        default () {
          return [];
        }
      },
      dataShow: {
        type: Boolean,
        default () {
          return false;
        }
      },
      add: {
        type: Boolean,
        default () {
          return false;
        }
      },
      delCheck: {
        type: Boolean,
        default () {
          return false;
        }
      },
      assign: {
        type: Boolean,
        default () {
          return false;
        }
      },
      reset: {
        type: Boolean,
        default () {
          return false;
        }
      },
    },
    computed: {
//        过滤数据表
      filiterTableDate(){
        let fdata
        if (!this.dataAll) {
          fdata=[]
          console.log(this.dataAll)
        } else {
          console.log(this.dataAll)
          let e = this.dataAll.slice()
          let keys = this.searchKey
          let filterData = function (element) {
            if (keys === "") {
              return true
            }
            for (let o in element) {
              if (String(element[o]).indexOf(keys) >= 0) {
                return true
              }
            }
            return false
          }
          fdata = e.filter(filterData)
          if (!filterData()) {
            this.total = fdata.length
          } else {
            this.total = this.totals
          }
        }
        return fdata
      },
//      当前表数据
      curTableData() {
        return this.filiterTableDate
      },
    },
    watch: {},
    methods: {
//        刷新数据
      refresh (){
        this.$emit('refresh')

      },
//        选择数据
      selectRow (selection){
        this.selectRows = selection
      },
//      改变页码大小
      changeSize (current) {
        this.pageSize = current
        let pagedata = {
          pagesize: this.pageSize,
          page: this.current
        }
        this.$emit('changePage', pagedata)
      },
//      改变页码
      changePage (current) {
        this.current = current
        let pagedata = {
          pagesize: this.pageSize,
          page: this.current
        }
        this.$emit('changePage', pagedata)
      },
//      导出数据1为原始数据，2为当前数据
      exportData (type) {
        if (type === 1) {
          this.$refs.table.exportCsv({
            filename: '原始数据',
//            columns: this.columns.filter((col, index) => index < 5),
//            data: this.dataAll,
          });
        } else if (type === 2) {
          this.$refs.table.exportCsv({
            filename: '排序和过滤后的数据',
            original: false
          });
        }
      },
//      显示详细记录
      show (row) {
        this.showItem = row
        this.showData = true
      },
//      编辑表格数据
      edit(index){
        this.$emit('edit', this.curTableData[index])
      },
//      新增
      addClick(){
        this.$emit('add')
      },
//      授权
      assignClick(){
        let list = []
        for (let i = 0; i < this.selectRows.length; i++) {
          list.push(this.selectRows[i].Id)
        }
        this.$emit('assign', list)
      },
      //      重置
      resetClick(){
        let list = []
        for (let i = 0; i < this.selectRows.length; i++) {
          list.push(this.selectRows[i].Id)
        }
        this.$emit('reset', list)
      },
      //      删除所选确认
      delCheckClick(){
        this.$Modal.confirm({
          title: '删除确认',
          content: '<p>请确认此数据删除后，不影响其他功能或人员使用。</p>' +
          '<p>是否继续删除？</p>',
          onOk: () => {
            this.delList(this.selectRows)
          },
          onCancel: () => {
          }
        })
      },
      //      删除所选
      delList(rows){
        let list = []
        for (let i = 0; i < rows.length; i++) {
          list.push(rows[i].Id)
        }
        this.$emit('delCheck', list)
      },
      //      删除确认
      remove(index){
        this.$Modal.confirm({
          title: '删除确认',
          content: '<p>请确认此数据删除后，不影响其他功能或人员使用。</p>' +
          '<p>是否继续删除？</p>',
          onOk: () => {
            this.del(index)
          },
          onCancel: () => {
          }
        })
      },
      //      删除
      del(id){
        this.$emit('del', this.curTableData[id])
      }
    },
    mounted (){
//      this.getall()
    }
  }
</script>

